<template>
  <div v-loading="loading">
    <table class="table1" cellspacing="0" id="table1">
      <tr class="tr1">
        <td colspan="8" class="td1"><strong>项目费用明细单</strong></td>
      </tr>
      <tr class="tr1">
        <td class="td1">部门</td>
        <td colspan="7" class="td1">{{deptName}}</td>
      </tr>
      <tr class="tr1">
        <td class="td1">项目名称</td>
        <td colspan="7" class="td1">{{projectName}}</td>
      </tr>
      <tr class="tr1">
        <td class="td1">项目编号</td>
        <td colspan="7" class="td1">{{projectNumber}}</td>
      </tr>
      <tr class="tr1">
        <td class="td1">事由</td>
        <td colspan="7" class="td1">{{things}}</td>
        <el-input placeholder="                                                                     请输入加班事由"
                  v-model="things" size="small" class="table-form-input"
                  style="z-index:9999;float:left;margin-left:-722px;width:720px" @change="thingsChange"
        ></el-input>

        <!--  -->
        <!-- <td colspan="0" class="td1" v-if="false">{{things}}</td> -->
      </tr>
      <tr class="tr1">
        <td class="td1">人员名单</td>
        <td class="td1">日期</td>
        <td class="td1">日期类别</td>
        <td class="td1">餐费</td>
        <td class="td1">交通费</td>
        <td class="td1">补助</td>
        <td class="td1">其他</td>
        <td class="td1">小计</td>
      </tr>
      <template v-for="item in tableData1">
        <tr class="tr1">
          <td class="td1">{{item.persons}}</td>
          <td class="td1">{{item.theTime}}</td>
          <td class="td1">{{item.timeType}}</td>
          <td class="td1">{{item.eating}}</td>
          <td class="td1">{{item.traffic}}</td>
          <td class="td1">{{item.subsidy}}</td>
          <td class="td1">{{item.other}}</td>
          <td class="td1">{{item.total}}</td>
        </tr>
      </template>
      <tr class="tr1">
        <td class="td1" colspan="2">制表人：</td>
        <td class="td1">{{userName}}</td>

        <td class="td1"></td>
        <td class="td1"></td>
        <td class="td1" colspan="2">审批人：</td>
        <td class="td1"></td>
      </tr>

    </table>

  </div>
</template>
<script>
  import XLSX from "xlsx";
  import FileSaver from "file-saver";

  export default {
    data() {
      return {
        loading: false,
        userName: "",
        name: "",
        tableData1: [],
        things: "",
      };
    },
    mounted: function () {

    },
    methods: {
      thingsChange(value) {
        this.$emit("changeThings", value)
      },
      loadProjectData() {
        this.userName = this.$store.state.user.name;
        var _this = this;
        if (this.depno == "" && this.projectNumber == "") {
          this.tableData1 = "";
          return;
        }
        this.loading = true;
        this.postRequest("/expense/getProjectDataByTime", {
          depno: this.depno,
          endtime: this.endtime,
          starttime: this.starttime,
          project_number: this.projectNumber,
          positionid:this.positionid
        }).then(resp => {
          this.loading = false;
          if (resp && resp.status == 200) {
            console.log(resp.data)
            _this.tableData1 = resp.data;
          }
        });
      },
      loadProjectDataByExpenseId(value) {
        var _this = this
        this.postRequest("/expense/getProjectDataByExpenseId", {
          expense_ids: value
        }).then(resp => {
          this.loading = false;
          if (resp && resp.status == 200) {
            _this.tableData1 = resp.data;
          }
        });
      },
      exportToExcel() {
        if (this.deptName == "") {
          this.$message.warning("请选择部门");
          return;
        }
        if (this.projectName == "") {
          this.$message.warning("请选择项目");
          return;
        }
        let et = XLSX.utils.table_to_book(document.getElementById("table1"));
        let etout = XLSX.write(et, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([etout], {
              type: "application/octet-stream"
            }),
            "项目费用明细单.xlsx"
          ); //导出的文件名
        } catch (e) {
          console.log(e, etout);
        }
        return etout;
      }
    },
    props: {
      depno: {
        type: Number,
        default: 0
      },
      starttime: {
        type: String,
        default: ''
      },
      endtime: {
        type: String,
        default: ''
      },
      deptName: {
        type: String,
        default: ''
      },
      projectName: {
        type: String,
        default: ''
      },
      projectNumber: {
        type: String,
        default: ''
      },
      expense_ids: {
        type: Array,
        default: []
      },
      positionid: {
        type: Array,
        default: []
      }

    },
    watch: {
      projectName: function (value, oldValue) {
        this.projectName = value
      },
      projectNumber: function (value, oldValue) {
        this.projectNumber = value
        this.loadProjectData();
      },
      depno: function (value, oldValue) {
        this.loadProjectData();
      },
      starttime: function (value, oldValue) {
        this.loadProjectData();
      },
      endtime: function (value, oldValue) {
        this.loadProjectData();
      },
      deptName: function (value, oldValue) {
        this.deptName = value
      },
      expense_ids: function (value, oldValue) {
        if (value.length > 0) {
          this.loadProjectDataByExpenseId(value)
        } else {
          this.loadProjectData();
        }
      },
      positionid: function (value, oldValue) {
        this.loadProjectData();
      }
    }
  }
</script>
<style lang="css" scoped>
  .table-form-input {
    border: 1px solid white;
    outline: medium;
    border-radius: 0px;
  }

  .table1 {
    border: 1px solid rgb(155, 154, 154);
    margin: auto;
    text-align: center;
    border-radius: 5px;
  }

  .td1 {
    border: 1px solid rgb(155, 154, 154);
    height: 30px;
    width: 100px;
  }

  .tr1 {
    border: 1px solid rgb(155, 154, 154);
  }

  table tr:nth-child(odd) {
    background: #fff;
  }

  table tr:nth-child(even) {
    background: #f5fafa;
  }

  .title {
    position: relative;
    margin-left: 55px;
    margin-top: -97px;
    width: 173px;
    height: 37px;
    box-sizing: border-box;
    border: 1px solid rgb(224, 223, 223);
    background-color: white;
    line-height: 120px;
    text-indent: 5px;
    background: linear-gradient(
      19deg,
      transparent 49.5%,
      rgb(155, 154, 154) 49.5%,
      rgb(155, 154, 154) 50.5%,
      transparent 50.5%
    );
  }

  .title::before {
    content: "";
    position: absolute;
    /* left:-30px; */
    top: -30px;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(155, 154, 154);
    transform-origin: bottom center;
    transform: rotateZ(45deg) scale(0.48);
    animation: slash 1s infinite ease;
  }

  @keyframes slash {
    100% {
      transform: rotateZ(45deg) scale(0.48);
    }
  }
</style>
